<template>
	<view class="top_horizontal_line"></view>
	<view class="pets_details_box">
		<view class="all_order_status_box">
			<view class="order_status">{{ getStatusText(status) }}</view>
			<view class="order_tips">以下是订单编号：{{ orderId }}的全部日订单，如需查看某天的服务情况，点击单个日订单即可查看。</view>
		</view>
		<view class="order_list_item_box">
			<view class="pet_companion_teacher_box">
				<view class="pet_teacher_title">陪宠师信息</view>
				<view class="pet_teacher_info_box">
					<image class="pet_teacher_img" :src="orderInfo.petsitterAvatar"></image>
					<view class="pet_teacher_info">
						<view class="pet_teacher_name">{{ orderInfo.petsitterNickName }}</view>
						<view class="pet_teacher_tel">{{ orderInfo.petsitterRealName }}｜{{ orderInfo.petsitterPhone }}</view>
					</view>
				</view>
			</view>
			<view class="pet_companion_teacher_box">
				<view class="pet_teacher_title">宠物主信息</view>
				<view class="pet_teacher_info_box">
					<image class="pet_teacher_img" :src="orderInfo.userAvatar"></image>
					<view class="pet_teacher_info">
						<view class="pet_teacher_name">{{ orderInfo.userNickName }}</view>
						<view class="pet_teacher_tel">{{ orderInfo.userPhone }}</view>
					</view>
				</view>
			</view>
			<view class="order_main_item_box">
				<view class="association_tips">关联日服务订单</view>
				<view class="order_info_status_box">
					<view class="name_status">
						<view class="name_transfer">
							<image class="user_avatar_pic" :src="orderInfo?.orderDetailVO?.userAvatar"></image>
							<view class="studio_name">{{ orderInfo?.orderDetailVO?.userNickName }}</view>
						</view>
						<view class="order_status">{{ getMainStatusText(orderInfo?.orderDetailVO?.status) }}</view>
					</view>
					<view class="order_date">订单号：{{ orderInfo?.orderDetailVO?.id }}</view>
				</view>
				<view class="studio_name_text">{{ orderInfo?.orderDetailVO?.studioName }}</view>
				<view class="order_server_info">
					<scroll-view class="multiple_specs_scroll" scroll-x="true" v-if="orderInfo?.orderGoodsSkuVOSAll?.length > 1">
						<view class="server_info_box" v-for="val in orderInfo.orderGoodsSkuVOSAll" :key="val.skuId">
							<image class="server_img" :src="val.goodsAvatar"></image>
							<view class="specs_box">{{ val.goodsName }}</view>
							<view class="server_price">×{{ val.serviceDays }}</view>
						</view>
					</scroll-view>
					<view class="server_info_box" v-if="orderInfo?.orderGoodsSkuVOSAll?.length == 1">
						<image class="server_img" :src="orderInfo?.orderGoodsSkuVOSAll[0]?.goodsAvatar"></image>
						<view class="name_price">
							<view class="server_name">{{ orderInfo?.orderGoodsSkuVOSAll[0]?.goodsName }}</view>
							<view class="specs_price">
								<text class="server_specs">{{ orderInfo?.orderGoodsSkuVOSAll[0]?.serviceTime }} | ¥{{ orderInfo?.orderGoodsSkuVOSAll[0]?.price }}</text>
								<!--								<text class="server_price"></text>-->
							</view>
						</view>
					</view>
					<view class="order_price_box">
						<view class="order_price">¥{{ orderInfo?.orderDetailVO?.payAmount }}</view>
						<view class="pay_text">{{ getPayText(orderInfo?.orderDetailVO?.status) }}</view>
					</view>
				</view>
				<view class="order_other_info_box">
					<view class="other_info_item">
						<view class="other_label">宠物{{ orderInfo?.orderDetailVO?.petNum }}只</view>
						<view class="other_value">
							<text v-for="(val, valIndex) in orderInfo?.orderDetailVO?.petList" :key="valIndex">
								{{ val.petNickName }}({{ getPetTypeText(val.type) }})
								<text class="m_l_r_8" v-if="valIndex < orderInfo?.orderDetailVO?.petList.length - 1">|</text>
							</text>
						</view>
					</view>
					<view class="other_info_item">
						<view class="other_label">服务时间</view>
						<view class="other_value">
							{{ orderInfo?.orderDetailVO?.serviceStartTime?.substring(0, 10) }}&nbsp;{{ handleDoorTime(orderInfo?.orderDetailVO?.doorTime) }}
						</view>
					</view>
					<view class="other_info_item">
						<view class="other_label">服务地址</view>
						<view class="other_value">{{ orderInfo?.orderDetailVO?.address }}</view>
					</view>
				</view>
			</view>
			<view class="order_item_box" @click="toDetail(orderInfo)">
				<view class="order_status_box">
					<view class="name_status">
						<view class="studio_name">{{ orderInfo?.valueAddadOrderDetailVO?.studioName }}</view>
						<view class="order_status">{{ getStatusText(orderInfo?.valueAddadOrderDetailVO?.status) }}</view>
					</view>
					<view class="order_date">订单号：{{ orderInfo?.valueAddadOrderDetailVO?.id }}</view>
				</view>
				<view class="order_server_info">
					<scroll-view class="multiple_specs_scroll" scroll-x="true" v-if="orderInfo?.valueAddadOrderDetailVO?.orderGoodsSkuVOS?.length > 1">
						<view class="server_info_box" v-for="val in orderInfo?.valueAddadOrderDetailVO?.orderGoodsSkuVOS" :key="val.skuId">
							<image class="server_img" :src="val.goodsAvatar"></image>
							<view class="specs_box">{{ val.goodsName }}</view>
							<!--							<view class="server_price">×{{ val.serviceDays }}</view>-->
						</view>
					</scroll-view>
					<view class="server_info_box" v-if="orderInfo?.valueAddadOrderDetailVO?.orderGoodsSkuVOS?.length == 1">
						<image class="server_img" :src="orderInfo?.valueAddadOrderDetailVO?.orderGoodsSkuVOS[0]?.goodsAvatar"></image>
						<view class="name_price">
							<view class="server_name">{{ orderInfo?.valueAddadOrderDetailVO?.orderGoodsSkuVOS[0]?.goodsName }}</view>
							<view class="specs_price">
								<text class="server_specs">
									{{ orderInfo?.valueAddadOrderDetailVO?.orderGoodsSkuVOS[0]?.serviceTime }} | ¥{{ orderInfo?.valueAddadOrderDetailVO?.orderGoodsSkuVOS[0]?.price }}
								</text>
								<!--								<text class="server_price"></text>-->
							</view>
						</view>
					</view>
					<view class="order_price_box">
						<view class="order_price">¥{{ orderInfo?.valueAddadOrderDetailVO?.payAmount }}</view>
						<view class="pay_text">{{ getPayText(orderInfo?.valueAddadOrderDetailVO?.status) }}</view>
					</view>
				</view>
				<view class="order_other_info_box">
					<view class="other_info_item">
						<view class="other_label">宠物{{ orderInfo?.valueAddadOrderDetailVO?.petNum }}只</view>
						<view class="other_value">
							<text v-for="(val, valIndex) in orderInfo?.valueAddadOrderDetailVO?.petList" :key="valIndex">
								{{ val.petNickName }}({{ getPetTypeText(val.type) }})
								<text class="m_l_r_8" v-if="valIndex < orderInfo?.valueAddadOrderDetailVO?.petList.length - 1">|</text>
							</text>
						</view>
					</view>
					<view class="other_info_item">
						<view class="other_label">服务时间</view>
						<view class="other_value">
							{{ orderInfo?.valueAddadOrderDetailVO?.serviceStartTime?.substring(0, 10) }}&nbsp;{{ handleDoorTime(orderInfo?.valueAddadOrderDetailVO?.doorTime) }}
						</view>
					</view>
					<view class="other_info_item">
						<view class="other_label">服务地址</view>
						<view class="other_value">{{ orderInfo?.valueAddadOrderDetailVO?.address }}</view>
					</view>
					<!--					<view class="other_info_item">-->
					<!--						<view class="other_label">服务宠物</view>-->
					<!--						<view class="other_value">-->
					<!--							<view class="other_value">-->
					<!--								<template v-if="item?.petVOList?.length">-->
					<!--									<text class="pet_name_date" v-for="(val, i) in item.petVOList" :key="i">{{ val.petNickName }}-{{ item?.serviceDate?.substring(0, 10) }}</text>-->
					<!--								</template>-->
					<!--								<text class="pet_name_date" v-else>-->
					<!--									{{ item?.serviceDate?.substring(0, 10) }}-->
					<!--								</text>-->
					<!--							</view>-->
					<!--						</view>-->
					<!--					</view>-->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import api from "@/api/index";

import { useStudioStoreToRefs } from "@/store/useStudioStore";

let { studioBalance, studio, identity } = useStudioStoreToRefs();

let orderId = ref();
let orderType = ref();
let status = ref();
let orderInfo = reactive({});

const getMainStatusText = (status) => {
	switch (Number(status)) {
		case 0:
			return "待付款";
		case 1:
			return "待服务";
		case 2:
		case 3:
			return "已接单";
		case 4:
			return "已完成";
		case 5:
		case 6:
		case 7:
			return "已取消";
		case 8:
			return "待派单";
		default:
			return "";
	}
};

const getStatusText = (status) => {
	if (orderType.value == -1) {
		switch (status) {
			case 0:
				return "待付款";
			case 1:
				return "待服务";
			case 8:
				return "待接单";
			case 2:
			case 3:
				return "已接单";
			case 4:
				return "已完成";
			case 5:
			case 6:
			case 7:
				return "已取消";
			default:
				return "";
		}
	} else {
		switch (status) {
			case 0:
				return "待接单";
			case 1:
				return "待服务";
			case 2:
				return "服务中";
			case 3:
				return "已完成";
			case 4:
			case 5:
				return "已取消";
			case 6:
				return "待付款";
			default:
				return "";
		}
	}
};
const handleDoorTime = (data) => {
	if (data) {
		let dataArr = data?.split("~");
		if (dataArr[0] == "00:00" && dataArr[1] == "00:00") {
			return "无时间段要求";
		} else {
			return data;
		}
	} else {
		return data;
	}
};
const getPayText = (type) => {
	if (orderType.value == -1) {
		switch (type) {
			case 0:
				return "应付";
			case 5:
			case 6:
			case 7:
				return "合计";
			default:
				return "实付";
		}
	} else {
		switch (type) {
			case 4:
			case 5:
				return "合计";
			default:
				return "实付";
		}
	}
};
const getPetTypeText = (type) => {
	switch (type) {
		case 0:
			return "猫";
		case 1:
			return "狗";
		default:
			return "其他";
	}
};
// 获取数据
const onDataGet = async () => {
	return new Promise(async (resolve, reject) => {
		uni.showLoading({
			title: "加载中",
			mask: true
		});
		try {
			const res = await api({
				method: "get",
				contentType: "json",
				url: `/mall/order/detail/${orderId.value}`
			});
			Object.assign(orderInfo, res.data);
			uni.hideLoading();
			resolve(true);
		} catch (error) {
			uni.hideLoading();
			reject(false);
		}
	});
};
// 详情
const toDetail = (item) => {
	uni.navigateTo({
		url: `/pages/studioOrders/addedServicesDetail/index?id=${item?.valueAddadOrderDetailVO?.id}&orderType=0`
	});
};
onLoad(async (options) => {
	orderId.value = options.id;
	orderType.value = options.orderType;
	status.value = options.status;
});
onShow(async () => {
	await onDataGet();
});
</script>

<style scoped lang="scss">
.pets_details_box {
	width: 100%;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 104rpx + 28rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 104rpx + 28rpx);

	.all_order_status_box {
		position: relative;
		width: 100%;
		padding: 48rpx 32rpx;
		padding-bottom: 90rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #ff7d9e 18%, #ffb796 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;

		.order_status {
			font-weight: bold;
			font-size: 40rpx;
			color: #ffffff;
		}

		.order_tips {
			font-weight: 400;
			font-size: 26rpx;
			color: #ffffff;
			margin-top: 8rpx;
		}
	}

	.order_list_item_box {
		position: relative;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: -48rpx;

		.pet_companion_teacher_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;

			.pet_teacher_title {
				font-weight: bold;
				font-size: 26rpx;
				color: #1b2120;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #e4e6e6;
			}

			.pet_teacher_info_box {
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.pet_teacher_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.pet_teacher_info {
					margin-left: 32rpx;
					width: calc(100% - 120rpx - 32rpx);

					.pet_teacher_name {
						font-weight: bold;
						font-size: 36rpx;
						color: #1b2120;
					}

					.pet_teacher_tel {
						font-weight: 400;
						font-size: 26rpx;
						color: #7c807f;
						margin-top: 16rpx;
					}
				}
			}
		}

		.order_main_item_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 64rpx 32rpx 0;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			position: relative;

			.association_tips {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 8rpx 18rpx;
				box-sizing: border-box;
				background: #6363ff;
				border-radius: 24rpx 0rpx 24rpx 0rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #ffffff;
			}

			.order_info_status_box {
				.name_status {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name_transfer {
						display: flex;
						flex-direction: row;
					}

					.user_avatar_pic {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background: #f9f6f6;
						margin-right: 16rpx;
					}

					.studio_name {
						font-weight: bold;
						font-size: 32rpx;
						color: #1b2120;
					}

					.order_status {
						font-weight: 400;
						font-size: 26rpx;
						color: #6363ff;
					}
				}

				.order_date {
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
					margin-top: 16rpx;
				}
			}

			.studio_name_text {
				font-weight: bold;
				font-size: 26rpx;
				color: #1b2120;
				margin-top: 48rpx;
				border-bottom: 1rpx solid #e4e6e6;
				padding-bottom: 24rpx;
			}

			.order_server_info {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.server_info_box {
					display: flex;
					align-items: center;
					flex-direction: row;

					.server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}

					.name_price {
						margin-left: 16rpx;

						.server_name {
							font-weight: bold;
							font-size: 32rpx;
							color: #1b2120;
						}

						.specs_price {
							font-weight: 400;
							font-size: 26rpx;
							color: #7c807f;
							margin-top: 24rpx;

							.server_specs {
							}

							.server_price {
							}
						}
					}
				}

				.multiple_specs_scroll {
					white-space: nowrap;
					width: calc(100% - 128rpx);

					.server_info_box {
						display: inline-block;
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						position: relative;
						margin-right: 16rpx;

						.server_img {
							width: 120rpx;
							height: 120rpx;
							border-radius: 12rpx;
						}

						.specs_box {
							position: absolute;
							top: 8rpx;
							left: 8rpx;
							padding: 4rpx;
							box-sizing: border-box;
							max-width: 98rpx;
							background: #f9f6f6;
							border-radius: 4rpx;
							font-weight: 400;
							font-size: 18rpx;
							color: #1b2120;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.server_price {
							position: absolute;
							bottom: 0;
							right: 0;
							padding: 8rpx 10rpx;
							box-sizing: border-box;
							background: rgba(0, 0, 0, 0.35);
							border-radius: 24rpx 0rpx 24rpx 0rpx;
							font-weight: bold;
							font-size: 18rpx;
							color: #ffffff;
						}
					}
				}

				.order_price_box {
					width: 128rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);

					.order_price {
						font-weight: bold;
						font-size: 28rpx;
						color: #1b2120;
					}

					.pay_text {
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-top: 16rpx;
					}
				}
			}

			.order_other_info_box {
				width: 100%;
				border-radius: 16rpx;
				border: 2rpx solid #f9f6f6;
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				margin-top: 16rpx;

				.other_info_item {
					display: flex;
					flex-direction: row;
					margin-bottom: 40rpx;

					.other_label {
						width: 96rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #5c5e5e;
					}

					.other_value {
						max-width: calc(100% - 96rpx - 16rpx);
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-left: 16rpx;
					}
				}

				.other_info_item:last-child {
					margin-bottom: 0;
				}
			}
		}

		.order_item_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;

			.order_status_box {
				.name_status {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.studio_name {
						font-weight: bold;
						font-size: 32rpx;
						color: #1b2120;
					}

					.order_status {
						font-weight: 400;
						font-size: 26rpx;
						color: #6363ff;
					}
				}

				.order_date {
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
					margin-top: 10rpx;
				}
			}

			.order_server_info {
				display: flex;
				justify-content: space-between;
				margin-top: 48rpx;

				.server_info_box {
					display: flex;
					align-items: center;
					flex-direction: row;

					.server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}

					.name_price {
						margin-left: 16rpx;

						.server_name {
							font-weight: bold;
							font-size: 32rpx;
							color: #1b2120;
						}

						.specs_price {
							font-weight: 400;
							font-size: 26rpx;
							color: #7c807f;
							margin-top: 24rpx;

							.server_specs {
							}

							.server_price {
							}
						}
					}
				}

				.multiple_specs_scroll {
					white-space: nowrap;
					width: calc(100% - 128rpx);

					.server_info_box {
						display: inline-block;
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						position: relative;
						margin-right: 16rpx;

						.server_img {
							width: 120rpx;
							height: 120rpx;
							border-radius: 12rpx;
						}

						.specs_box {
							position: absolute;
							top: 8rpx;
							left: 8rpx;
							max-width: 98rpx;
							background: #f9f6f6;
							border-radius: 4rpx;
							font-weight: 400;
							font-size: 18rpx;
							color: #1b2120;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.server_price {
							position: absolute;
							bottom: 0;
							right: 0;
							padding: 8rpx 10rpx;
							box-sizing: border-box;
							background: rgba(0, 0, 0, 0.35);
							border-radius: 24rpx 0rpx 24rpx 0rpx;
							font-weight: bold;
							font-size: 18rpx;
							color: #ffffff;
						}
					}
				}

				.order_price_box {
					width: 128rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);

					.order_price {
						font-weight: bold;
						font-size: 28rpx;
						color: #1b2120;
					}

					.pay_text {
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-top: 16rpx;
					}
				}
			}

			.order_other_info_box {
				width: 100%;
				border-radius: 16rpx;
				border: 2rpx solid #f9f6f6;
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				margin-top: 16rpx;

				.other_info_item {
					display: flex;
					flex-direction: row;
					margin-bottom: 40rpx;

					.other_label {
						width: 96rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #5c5e5e;
					}

					.other_value {
						max-width: calc(100% - 96rpx - 16rpx);
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-left: 16rpx;
					}
				}

				.other_info_item:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}
</style>
